<template>
  <div class="p-4">
    <BasicTable @register="registerTable" ref="tableRef">
      <template #tableTitle>
        <a-button
          type="primary"
          v-auth="'menu:add'"
          preIcon="ant-design:plus-outlined"
          @click="handleCreate"
        >
          新增菜单</a-button
        >
        <!-- <a-button type="primary" preIcon="ic:round-expand" @click="expandAll"
          >展开全部</a-button
        >
        <a-button type="primary" preIcon="ic:round-compress" @click="collapseAll"
          >折叠全部</a-button
        > -->

        <a-dropdown v-if="checkedKeys.length > 0" v-auth="'menu:batchdelete'">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined" />
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button
            >批量操作
            <Icon icon="ant-design:down-outlined" />
          </a-button>
        </a-dropdown>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="getTableAction(record)"
          :dropDownActions="getDropDownAction(record)"
        />
      </template>
    </BasicTable>
    <MenuDrawer
      @register="registerDrawer"
      @success="handleSuccess"
      :showFooter="showFooter"
    />
    <DataRuleList @register="registerDrawer1" />
  </div>
</template>
<script lang="ts" name="system-menu" setup>
import { nextTick, ref } from "vue";
import { BasicTable, useTable, TableAction } from "/@/components/Table";
import { useListPage } from "/@/hooks/system/useListPage";
import { useDrawer } from "/@/components/Drawer";
import { useMessage } from "/@/hooks/web/useMessage";
import MenuDrawer from "./MenuDrawer.vue";
import DataRuleList from "./DataRuleList.vue";
import { columns, searchFormSchema } from "./menu.data";
import { list, deleteMenu, batchDeleteMenu } from "./menu.api";
const { createConfirm: confirm } = useMessage();
const checkedKeys = ref<Array<string | number>>([]);
const showFooter = ref(true);
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerDrawer1, { openDrawer: openDataRule }] = useDrawer();
// 列表页面公共参数、方法isTreeTable: true,
const { prefixCls, tableContext } = useListPage({
  tableProps: {
    title: "菜单列表",
    api: list,
    columns: columns,
    size: "small",
    pagination: true,
    showTableSetting: true,
    showIndexColumn: false,
    tableSetting: { fullScreen: true },
    formConfig: {
      schemas: searchFormSchema,
      autoAdvancedCol: 4,
      baseColProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 4 },
      actionColOptions: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 4 },
    },
    actionColumn: {
      width: 70,
    },
    fetchSetting: {
      // 传给后台的当前页字段
      pageField: "page",
      // 传给后台的每页显示多少条的字段
      sizeField: "limit",
      // 接口返回表格数据的字段
      listField: "data",
      // 接口返回表格总数的字段
    },
    actionColumn: {
      width: 70,
    },
  },
});
//注册table数据
const [
  registerTable,
  { reload, expandAll, collapseAll, setSelectedRowKeys },
] = tableContext;
/**
 * 选择列配置
 */
const rowSelection = {
  type: "checkbox",
  columnWidth: 30,
  selectedRowKeys: checkedKeys,
  onChange: onSelectChange,
};

/**
 * 选择事件
 */
function onSelectChange(selectedRowKeys: (string | number)[]) {
  checkedKeys.value = selectedRowKeys;
}

/**
 * 新增
 */
function handleCreate() {
  showFooter.value = true;
  openDrawer(true, {
    isUpdate: false,
  });
}

/**
 * 编辑
 */
function handleEdit(record) {
  console.log(record, "record");
  showFooter.value = true;
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}
/**
 * 详情
 */
function handleDetail(record) {
  showFooter.value = false;
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}
/**
 * 添加下级
 */
function handleAddSub(record) {
  openDrawer(true, {
    record: { parentId: record.id, menuType: 1 },
    isUpdate: false,
  });
}
/**
 * 数据权限弹窗
 */
function handleDataRule(record) {
  openDataRule(true, { id: record.id });
}

/**
 * 删除
 */
async function handleDelete(record) {
  await deleteMenu({ id: record.id }, reload);
  setSelectedRowKeys([]);
}
/**
 * 批量删除事件
 */
async function batchHandleDelete() {
  confirm({
    title: "注意",
    content: `确定要删除这些数据吗？删除后不可还原`,
    iconType: "warning",
    onOk: async () => {
      await deleteMenu({ id: checkedKeys.value }, reload);
      setSelectedRowKeys([]);
      checkedKeys.value = [];
    },
  });
}
/**
 * 成功回调
 */
function handleSuccess() {
  reload();
}

function onFetchSuccess() {
  // 演示默认展开所有表项
  nextTick(expandAll);
}

/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: "编辑",
      onClick: handleEdit.bind(null, record),
      auth: "menu:delete",
    },
  ];
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record) {
  return [
    // {
    //   label: '详情',
    //   onClick: handleDetail.bind(null, record),
    // },
    {
      label: "添加下级",
      onClick: handleAddSub.bind(null, record),
      auth: "menu:addsub",
    },
    {
      label: "删除",
      color: "error",
      auth: "menu:delete",
      popConfirm: {
        title: "是否确认删除",
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}
</script>
